:root {
  --bg: #0b0e12;
  --panel: #12161c;
  --text: #e6edf3;
  --muted: #9aa4b2;
  --primary: #4f8cff;
  --accent: #22c55e;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid #1f2630;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}
.site-header h1 {
  font-size: 18px;
  margin: 0;
}

.site-nav a {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 4px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
}
.site-nav a:hover { color: var(--text); background: #1a2029; }
.site-nav a.active { color: var(--text); background: #1a2029; border: 1px solid #2a3442; }

main.container { padding: 24px 16px; }
main h2 { margin-top: 0; font-size: 22px; }
main p { color: var(--muted); }

.site-footer {
  border-top: 1px solid #1f2630;
  background: var(--panel);
}
.site-footer .container { padding: 16px; color: var(--muted); }

@media (max-width: 640px) {
  .site-header .container { flex-direction: column; align-items: flex-start; }
}
